//webpackage.config.js

const path = require("path");
const webpack = require("webpack");
const HtmlWebPackPlugin = require("html-webpack-plugin"); // html 的插件

module.exports = {
    mode: "development", // 开发场景
    devtool: "cheap-module-source-map", // 报错信息定位到原始代码
    // 使用内部http服务
    devServer: {
        contentBase: path.join(__dirname, "./src/"),
        host: '127.0.0.1',
        publicPath: "/",
        // host: "localhost.myapp.cn",
        port: 9090,

        stats: {
            colors: true
        },
        // 代理接口
        proxy: {
            "/tdapi": {
                target: "http://127.0.0.1:8088/",
                changeOrigin: true,
                pathRewrite: { "^/tdapi": "/" }
            },
            "/tdops": {
                target: "http://127.0.0.1:8088/",
                changeOrigin: true,
                pathRewrite: { "^/tdops": "/" }
            },
            "/model": {
                target: "http://127.0.0.1:8088/",
                changeOrigin: true,
                pathRewrite: { "^/model": "/" }
            }
        }
    },
    // 入口文件
    entry: "./src/index.js",
    output: {
        path: __dirname + "/dist", //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    },

    // 将 jsx 添加到默认扩展名中，省略 jsx
    resolve: {
        extensions: [".wasm", ".mjs", ".js", ".json", ".jsx"], // 需要打包的文件后缀
        // 路径别名
        alias: {
            "@": path.resolve("src")
        }
    },
    // 关键的规则解析
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: "url-loader"
            },
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                exclude: /node_modules/
            },
            {
                test: "/.svg/",
                loader: "file-loader"
            },
            {
                test: /\.md$/,
                use: "raw-loader"
            },
            {
                test: /\.(js|jsx)$/, // jsx文件的正则
                exclude: /node_modules/, // 排除 node_modules 文件夹
                use: [
                    // {
                    //     loader: 'ts-loader',
                    // },
                    {
                        // loader 是 babel
                        loader: "babel-loader",
                        options: {
                            // babel 转义的配置选项
                            babelrc: false,
                            presets: [
                                // 添加 preset-react
                                require.resolve("@babel/preset-react"),
                                [require.resolve("@babel/preset-env"), { modules: false }]
                            ],
                            cacheDirectory: true
                        }
                    }
                ]
            },
            // 难啊,库版本需要匹配,找了半天
            {
                test: /\.(less|css)$/,
                exclude: /^node_modules$/,
                use: [
                    "style-loader",
                    "css-loader",
                    // "less-loader"
                    {
                        loader: "less-loader",
                        options: {
                            lessOptions: {
                                javascriptEnabled: true
                            }
                        }
                        // options: {
                        //     javascriptEnabled: true
                        // }
                    }
                ]
            }
        ]
    },
    // fs找不到的话这么配置
    node: {
        fs: "empty"
    },
    // HtmlWebpackPlugin
    stats: {
        children: false,
        entrypoints: false
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "public/index.html",
            filename: "index.html",
            inject: true
        }),
        //自动加载模块，而不必到处 import 或 require 。
        new webpack.ProvidePlugin({
            React: "React"
        })
    ]
};
